<template>
  <header class="clearfix "  :class="{'English': languageData.id == 'English','vip':vip !=1}"  style="position:relative" :updateStatusData="updateStatusData">
    <div class="left" v-show="navBoth.logo" :pifuDataFn="pifuDataFn">
        <div class=" " style="height: 50px;padding: 0px 10px;" v-on:click="goIndex()" :resourceDat="resourceDat">
          <img :src="imgUlr?imgUlr:loginImg" />
        </div>
    </div>
    <div class="left" v-show="navBoth.logo && !imgUlr">
      <p class="logoText EnglishLogoText" v-on:click="goIndex()">{{languageData.header.logoText}}</p>
    </div>
    <div class="nav left clearfix"  v-show="navBoth.nav && fromBy !='web'" :class="check">
      <div class="navBox navBox1" v-on:click="gotChart(1)" v-show="check!='data'"><p >{{languageData.header.transport}}</p></div>
      <div class="navBox navBox2" v-on:click="gotChart(2)" v-show="check!='data'"><p >{{languageData.header.histroy}}</p></div>
      <div class="navBox" v-on:click="gotAdd()" v-show="check!='data'"><p class="el-icon-document" > {{languageData.header.creatOder}}</p></div>
      <div class="navBox navBox2" v-show="user.level !=1" v-on:click="gotChart(3)"><p >{{languageData.header.Transit}} </p></div>
      <div class="cleae"> </div>
      <div class="red"></div>
    </div>
    <div class="right clearfix"  >
      <!--<div class="right" v-show="navBoth.user">-->
        <!--<div class="imgBox">-->
          <!--<img :src="user.headImg?user.headImg:null"/>-->
        <!--</div>-->
      <!--</div>-->
      <div class="right" v-show="navBoth.user && fromBy !='web'" style="margin-right: 20px">
        <el-popover ref="popover3" v-model="show2" placement="bottom" width="80" trigger="click">

          <div class="list" style="line-height: 30px" v-on:click="goAdmin('cityConfig')" >{{languageData.admin.changepassword}}  </div>
          <div class="list" style="line-height: 30px" v-on:click="goAdmin('adminChart')" >{{languageData.admin.orderstatistics}}</div>

          <div class="list" style="line-height: 30px" v-on:click="checkpifu(1)" v-show="user.level !=1">{{ languageData.header.default}}</div>
          <div class="list" style="line-height: 30px" v-on:click="checkpifu(0)" v-show="user.level !=1">{{ languageData.header.black}}</div>
          <div class="list" style="line-height: 30px" v-on:click="loginOut(user.id)">{{languageData.header.Exit}}</div>
        </el-popover>
        <p v-popover:popover3><a  style="cursor: pointer">{{user.nickName?user.nickName:''}} <i class="el-icon-arrow-down "> </i></a></p>
      </div>
      <div class="right" v-show="navBoth.language && fromBy !='web'">
        <div class="icon">{{navBoth.us?'':'|' }}</div>
      </div>
      <div class="right clearfix" v-show="navBoth.language ">
        <div class="left" style="position: relative">
          <el-popover ref="popover4" v-model="show" placement="bottom" width="80" trigger="click">
            <div class="list" v-on:click="languageCheng('Chinese')">{{languageData.header.potin}}</div>
            <div class="list" v-on:click="languageCheng('English')">{{languageData.header.potin2}}</div>
          </el-popover>
          <p v-popover:popover4><a  style="cursor: pointer">{{languageData.header.language}} <i class="el-icon-arrow-down"></i></a></p>
        </div>
      </div>
      <div class="right" v-show="navBoth.us && fromBy !='web'">
       <div class=" icon">{{(navBoth.us || navBoth.language) ?'|':'' }}</div>
      </div>
      <div class="right clearfix" v-show="navBoth.us && fromBy !='web'">
        <div class="left">
          <div class="iocnImg iconService">
          </div>
        </div>
        <div class="left" >
          <el-popover ref="popover" v-model="showPhone" placement="bottom" width="80" trigger="click">
            <div class="list" style="line-height: 30px" >0755-8670-0305</div>
          </el-popover>
          <p v-popover:popover><a  style="cursor: pointer">{{languageData.header.Contact}} </a></p>
        </div>
      </div>
      <div class="right" v-show="navBoth.login && fromBy !='web'">
        <div class="icon">|</div>
      </div>
      <div class="right" v-show="navBoth.user && fromBy !='web'">
        <div class="icon">|</div>
      </div>
      <div class="right clearfix" v-show="navBoth.login && fromBy !='web'">
        <div class="left">
          <div class="iocnImg iconLogin">
          </div>
        </div>
        <div class="left" >
          <p><a  style="cursor: pointer" v-on:click="goLogin()">{{languageData.header.Login}}</a></p>
        </div>
      </div>
      <div class="right clearfix" v-show="navBoth.user && fromBy !='web'">
        <div class="left">
          <div class="iocnImg iconLogin">
          </div>
        </div>
        <div class="left" >
          <p v-show="check!='data'"><a  style="cursor: pointer" v-on:click="goAdmin('mapDavis')">{{languageData.admin.deviceAdmin}}</a></p>
          <p v-show="check =='data'"><a  style="cursor: pointer" v-on:click="gotChart(4)">{{ languageData.header.home }}</a></p>
        </div>
      </div>
      <div class="right clearfix" >
        <div class="left">
        </div>
        <div class="left download" v-show="check!='data'" >
          <el-popover ref="popover5" v-model="show5" placement="bottom" width="150" trigger="hover" >
            <!--<div class="left" style="margin-left: 10px;margin-top: 10px">-->
              <!--<div class="code Ios" >-->
                <!--<img :src="ios"/>-->
              <!--</div>-->
              <!--<p style="line-height: 30px;text-align: center;">ios  </p>-->
            <!--</div>-->
            <div style="width: 150px">
              <div class="code Android" >
                <img :src="android" style="width:150px;"/>
              </div>
              <!--<p style="line-height: 30px;text-align: center"> 扫码下载 </p>-->
            </div>
          </el-popover>
          <p   v-popover:popover5><a  style="cursor: pointer;color: #000">{{languageData.header.download}}</a></p>
        </div>
      </div>
    </div>
  </header>
</template>
<style scoped>
  /*基础 中文样式*/
  .download{position: fixed;top: 80px;right: 0px; box-shadow:0 0 16px #e2e7ea ;padding: 5px 10px; background-color: white}
  .download p{line-height: 30px;height: 30px; color: #000}
  .download p a{line-height: 30px;height: 30px;}
  header {width: 100%; height: 50px;background-color: white;min-width: 1200px }
  header p {line-height: 50px;font-size: 14px;text-align: left;color: #262626}
  header p a{line-height: 50px;font-size: 14px;text-align: left;color: #262626}
  .imgBox {width: 30px;height: 30px;background:#e1e1e1;margin: 10px;margin-right:40px;}
  .icon{width:45px;height: 10px;font-size: 12px;line-height:52px;text-align: center;color: #e1e1e1}
  .iocnImg{width: 16px;height: 16px;background: #e1e1e1;margin-top: 15px;margin-right: 5px;}
  .logoText{color: #136eb4;font-size:28px;line-height: 50px;cursor: pointer}
  .logo{margin-left: 15px;font-size: 36px;font-weight: bold;margin-right: 5px;}
  .iconService{background: url("../../../static/img/icon/iconService.png")}
  .vip   .iconService{background: url("../../../static/img/icon/icon_service.png")}
  .vip .iocnImg{width: 18px;height: 18px;margin-top: 13px;}
  .iconLogin{background: url("../../../static/img/icon/iconLogin.png")}
  .vip   .iconLogin{background: url("../../../static/img/icon/icon_index.png")}
  .navBox {width:120px;height: 48px; float: left;text-align: center;cursor: pointer ;border-bottom: 2px solid #fff;}
  .navBox p{text-align: center;font-size: 16px;}
  .red {width: 80px;  border-bottom: 2px solid #136eb4;position: relative;left: 20px;display: none}
  .list { cursor: pointer ; text-align: center }
  .navBox1{width: 80px}
  .navBox2{width: 80px}
  .nav{margin-left: 40px}
  .chart{ }
  .chart   .red {left: 10px;display: block;width: 60px}
  .Histroy   .red {left: 90px;display: block;width: 60px}
  .creatOder   .red {left: 170px;width: 102px;display: block}
  /**英文样式覆盖**/
  .English .EnglishLogoText{ font-size: 14px;text-indent: 10px}
  .English  .navBox1{width: 100px}
  .English  .navBox2{width: 80px}
  .English .nav{margin-left: 0px}
  .English  .navBox{ width: auto; margin-left: 30px;}
  .English  .red{ left: 30px;width: 120px}
  .English .transport .red{ left: 30px;width: 98px}
  .English .histroy .red{ left: 158px;width: 80px}
  .English .create .red{ left: 267px;width: 212px}
  .English .chart   .red {left: 20px;display: block}
  .English .Histroy   .red {left: 140px;display: block}
  .English .creatOder   .red {left: 260px;width: 190px;display: block}
  .code {width: 150px; height: 150px;border: 1px solid #e1e1e1;margin: auto}
  .code img {width:100%}

  /* vip 样式 */
  .vip {background-color: #000 }
  .vip .navBox {border-bottom: none;}
  .vip .navBox p{text-align: center;font-size: 16px;color: #fff}
  .vip   p {color: #fff}
  .vip   p a{color: #fff}
</style>
<script>
  import { mapState, mapActions } from 'vuex'
  import Public from '../../vuex/public.js'
  import loginImg from '../../../static/img/icon/logo.png'
  import android from '../../../static/img/android.png'
  export default {
    name: 'my-header',
    created () {
     // 查看本页面路由 绑定对应页面class
      this.fromBy = this.$route.query.companyNumber?'web':'';
      if(this.fromBy =='web'){
        this.companyNumber = this.$route.query.companyNumber || '';
      }
      if(this.companyNumber){
        var parm = {
          companyNumber:this.companyNumber
        }
        this.getResource(parm)
      }
      this.check = this.$route.name || '';
      var usr = sessionStorage.getItem('user') || '';
      if(usr =="" ){

      } else {
        usr = JSON.parse(usr);
      }
      if(usr) {
        this.user = usr
        if(!usr.userId){

          if(this.check != 'login' && this.check != "map" && this.check != "index"&& this.check != "/"){
            this.$router.push({ name: 'login' })
          }
          return
        }
        if(usr.type == 0){
          this.$router.push({ name: 'AdminConfig' })
        }
      }else {

        if(this.check != 'login' && this.check != "map" && this.check != "index"&& this.check != "/"){
             this.$router.push({ name: 'login' })
        }
      }
    },
    data () {
      return {
        fromBy:'',
        companyNumbe:'',
        imgUlr:'',
        vip: 1,
        platform: null,
        check: null,
        show: false,
        show2: false,
        show5: false,
        showPhone:false,
        user: {
          nickName: '',
          img: '',
          id: null,
          type: null
        },
        android: android,
        loginImg: loginImg,
        input:null
      }
    },
    methods: {
      ...mapActions({
        lognOutPost: 'loginOutFn',
        getResource:'getResource'
      }),
      // 渲染地图
      checkpifu(a){
        this.$store.commit('pifu', a)
        this.show2 = !this.show2
      },
      mapFn (map) {
        map.setCenter({lat: 52.5160, lng: 13.3779})
        map.setZoom(13)
        map.setBaseLayer(this.defaultLayers.normal.traffic)
      },
      // 登陆
      goLogin () {
        this.$router.push({ name: 'login' })
      },
      goIndex () {
        if(this.fromBy =='web'){
          return
        }else {
          this.$router.push({ name: 'map' })
        }

      },
      gotAdd () {
        this.$router.push({ name: 'creatOder' })
      },
      gotChart (id) {
        if (id == 1) {
          this.$router.push({name: 'chart'})
        }
        if (id == 2) {
          this.$router.push({name: 'Histroy'})
        }
        if (id == 3) {
          this.$router.push({name: 'data'})
        }
        if (id == 4) {
          this.$router.push({name: 'index'})
        }
      },
      //  语言切换
      languageCheng (parm) {
        this.show = !this.show
        if (parm) {
          Public.publicLo.sessionStorageSav('Language',parm)
          this.$store.commit('updateLanguage', parm)
        }
      },
      //
        goAdmin(name){
          var test = window.location.href
          this.$router.push({ name: name})
          //window.open('/adminDavise','_self')
      },
      // 退出
      loginOut (id) {
        this.show2 = !this.show2
        var parm = {
          userId: id
        }
        this.lognOutPost(parm)
      },
      openSuccess (text) {
        this.$message({
          message: text,
          type: 'success'
        })
      },
      openError (text) {
        this.$message.error(text)
      }
    },
    computed: {
      navBoth: function () {
        var parm = this.nav || {};
        var userData = Public.publicLo.sessionStorageGet('user')||'{}';
        this.user = {
          nickName: '',
          headImg: '',
          id: null ,
          type: null,
          level:0
        }
        userData = JSON.parse(userData);
        if (userData.userId) {
          // 渲染
          this.user = {
            nickName: userData.userName || '',
            headImg: userData.headImg || '',
            id: userData.userId || '',
            type: userData.type || '',
            level:userData.level || 0
          }

          // 配置顶部菜单
          this.nav.user = true;
          this.nav.login = false;
          this.nav.nav = true;
          this.nav.logo = true;
          this.nav.language = true;
        }else {
          this.nav.user = false;
          this.nav.login = true;
          this.nav.nav = false;
          this.nav.logo = true;
          this.nav.language = true;
          if(this.check == 'login'){
            this.nav.login = false;
          }
        }
        return parm;
      },
      languageData: function () {
        var parm = this.language;
        if (parm) {
            if (parm.check == 'Chinese') {
              parm = parm.Chinese;
            }if (parm.check == 'English') {
              parm = parm.English;
            }
        }
        return parm
      },
      updateStatusData: function () {
        var parm = this.loginOutStatus;
        if (parm == 'out') {
          // 没记住密码保存空 localStorage
          Public.publicLo.sessionStorageSav('token', '');
          Public.publicLo.sessionStorageSav('user', '{}');
          // 清空所有数据
          this.$store.commit('loginOut', 'not');
          this.$router.push({ name: 'login' });
          // this.lognOutPost(this.user)
        } else if (parm == 'outErorr') {
          Public.publicLo.sessionStorageSav('token', '');
          Public.publicLo.sessionStorageSav('user', '{}');
          // 清空所有数据
          this.$store.commit('loginOut', null);
          this.$router.push({ name: 'login' })
        }
        return 1
      },
      pifuDataFn: function (){
        var parm = this.pifuData
        this.vip = parm
        return 1
      },
      resourceDat: function (){
        var parm = this.resource
        if(parm){
          console.log(parm)
          this.imgUlr = parm.body.data.logoUrl
        }
        return 1
      },
      ...mapState([
        'nav',
        'language',
        'loginOutStatus',
        'pifuData',
        'resource'
      ])
    },
    mounted () {
        // 滚动条bug解决
     window.screenTop = 0
    }
  }
</script>

